<template>
  <view class="container">
    <button type="primary" @click="chooseImg">上传图片</button>
    <!-- 图片展示区域，添加样式使图片排列更美观 -->
    <view class="image-container">
      <image 
        v-for="(item, index) in imgArr" 
        :src="item" 
        @click="previewImg(item)" 
        :key="index" 
        class="preview-image"
      ></image>
    </view>
    <button @click="pullDown">下拉刷新</button>
    <button type="primary" @click="setStorage">存储数据</button>
    <button type="primary" @click="getStorage">获取数据</button>
    <button type="primary" @click="removeId">移除id</button>

    <!-- #ifdef H5 -->
    <view>我希望只在h5页面中看见</view>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <view>我希望只在微信小程序页面中看见</view>
    <!-- #endif -->

    <view class="list-title">这是列表页</view>
    <view class="box-item" v-for="(item, index) in list" :key="index">
      {{ item }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: ['前端', 'JAVA', 'UI', '测试', '大数据'],
      imgArr: []
    };
  },
  onLoad(options) {
    console.log('页面加载了', options);
    // #ifdef H5
    console.log('我希望h5中打印');
    // #endif
    // #ifdef MP-WEIXIN
    console.log('我希望微信小程序中打印');
    // #endif
  },
  onShow() {
    console.log('页面显示了');
  },
  onReady() {
    console.log('页面初次渲染完成了');
  },
  onHide() {
    console.log('页面隐藏了');
  },
  methods: {
    pullDown() {
      console.log('开启下拉刷新')
      uni.startPullDownRefresh({
        success: () => {
          console.log('下拉刷新启动成功');
        },
        fail: (err) => {
          console.error('下拉刷新启动失败', err);
        }
      })
    },
    setStorage() {
      // 异步存储
      uni.setStorage({
        key: 'id',
        data: 80,
        success() {
          console.log('异步存储成功');
        },
        fail(err) {
          console.error('异步存储失败', err);
        }
      });
      // 同步存储
      try {
        uni.setStorageSync('id', 100);
        console.log('同步存储成功');
      } catch (e) {
        console.error('同步存储失败', e);
      }
    },
    getStorage() {
      // 异步获取
      uni.getStorage({
        key: 'id',
        success(res) {
          console.log('异步获取成功', res.data);
        },
        fail(err) {
          console.error('异步获取失败', err);
        }
      });
      // 同步获取
      try {
        const res = uni.getStorageSync('id');
        console.log('同步获取成功', res);
      } catch (e) {
        console.error('同步获取失败', e);
      }
    },
    removeId() {
      // 异步移除
      uni.removeStorage({
        key: 'id',
        success() {
          console.log('异步删除成功');
        },
        fail(err) {
          console.error('异步删除失败', err);
        }
      });
      // 同步移除
      try {
        uni.removeStorageSync('id');
        console.log('同步删除成功');
      } catch (e) {
        console.error('同步删除失败', e);
      }
    },
    chooseImg() {
      uni.chooseImage({
        count: 5,
        sourceType: ['album', 'camera'], // 指定图片来源，相册或相机
        success: res => {
          this.imgArr = res.tempFilePaths;
          console.log('选择图片成功', res.tempFilePaths);
        },
        fail(err) {
          console.error('选择图片失败', err);
        }
      })
    },
    previewImg(current) {
      if (!this.imgArr.length) return; // 图片数组为空时不执行预览
      uni.previewImage({
        current: current,
        urls: this.imgArr,
        loop: true,
        indicator: 'default',
        fail(err) {
          console.error('预览图片失败', err);
        }
      })
    }
  },
  onPullDownRefresh() {
    console.log('触发了下拉刷新')
    // 模拟网络请求延迟，使下拉刷新效果更明显
    setTimeout(() => {
      this.list = ['JAVA', 'UI', '前端', '测试', '大数据', '新增数据1', '新增数据2'];
      uni.stopPullDownRefresh();
      console.log('下拉刷新完成');
    }, 1000);
  },
  onReachBottom() {
    console.log('页面触底了')
    this.list = [...this.list, 'JAVA', 'UI', '前端', '测试', '大数据'];
  }
};
</script>

<style>
.container {
  padding: 16px;
}
/* 图片容器样式，让图片横向排列且有间距 */
.image-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}
/* 预览图片样式，设置固定宽高和圆角 */
.preview-image {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #eee;
}
.box-item {
  height: 100px;
  line-height: 100px;
  border-bottom: 1px solid #eee;
  padding-left: 10px;
}
.list-title {
  font-size: 18px;
  font-weight: bold;
  margin: 15px 0 10px;
}
/* h5中的样式 */
/* #ifdef H5 */
view {
  color: hotpink;
}
/* #endif */
/* 微信小程序中的样式 */
/* #ifdef MP-WEIXIN */
view {
  color: #0000FF;
}
/* #endif */
</style>